<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            display: block;
            width: 146px;
            /* margin: 0 auto; */
            /* 上下为0 左右auto */
        }

        h1 a{
            display: block;
            width: 146px;
            height: 58px;
            background: url(../image/logo.png) no-repeat;
            /* 兼容问题 */
            /* font-size: 0; */
            text-indent: -15em;
            /* 溢出隐藏 超出宽度范围内的隐藏起来 */
            overflow: hidden;
        }

        /* padding区域背景图   四个方向的padding都可能用于添加背景图*/
        /* eg. 新闻列表 */
        .list {
            width: 300px;
            border: 1px solid black;
            margin: 10px;
            list-style: none;
            font: 16px/32px "微软雅黑";
        }
        .list li {
            padding-left: 20px;
            background: url(../image/s.png) no-repeat left center;
        }

        /* 精灵图技术 */
        /* 减少服务器发送次数 css精灵 是一种处理网页背景图像的方式 */
        /* 将所有零星背景都集中到一张大图中 就不用频繁的发送请求 */
        /* 
            将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
            利用背景定位技术 将精灵图的每个小图片加载到对应的标签上

            精灵图放的都是小的装饰性质的背景图片 插入图片不能放
            精灵图的宽度取决于最宽的那个背景图片的标签宽度
            精灵图可以横向摆放也可以纵向摆放 但是每个图片之间必须留足够的空白
            精灵图的最低端 尽量留一点空白
            可以使用一些在线工具 生成精灵图 精灵图在线制作
        */
        p {
            width: 80px;
            height: 20px;
            background: url(../image/icons.png) no-repeat -146px -48px;
        }


    </style>
</head>
<body>
    <!-- 
        h1标签是权重最高的标签 一般会在内部书写最重要的内容 比如logo图片 最大的标题等
    -->
    <h1>
        <!-- <a href="#"><img src="../image/logo.png" alt=""></a> -->
        <!-- 怎么同时拥有文字和图片 就要替换插入图 -->
         <a href="">淘宝网|购物|五一</a>
    </h1>

    <ul class="list">
        <li>新闻标题新闻标题新闻标题</li>
        <li>新闻标题新闻标题</li>
        <li>新闻标题</li>
        <li>新闻标题新闻标题新闻</li>
    </ul>
    <p></p>
</body>
</html>1